import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { shallowEqualApp, useAppSelector } from '@/store'
import { CategoryWrapper, CategoryContent, CategoryItemImage } from './style'
import { Carousel } from 'antd'
import classnames from 'classnames'
import { changeCurrentIdAction } from '../../store/djradio'
import { useAppDispatch } from '@/store'
import { useSearchParams } from 'react-router-dom'
import { message } from 'antd'

interface IProps {
  children?: ReactNode
}

const DjCategory: React.FC<IProps> = () => {
  const PAGE_SIZE = 14
  const dispatch = useAppDispatch()
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const carouselRef = React.useRef<any>(null)
  const { djRadioCategory, currentId } = useAppSelector(
    (state) => ({
      djRadioCategory: state.djradio.djRadioCategory,
      currentId: state.djradio.currentId
    }),
    shallowEqualApp
  )
 // 新增：默认选中第一个分类
  React.useEffect(() => {
    if (djRadioCategory.length > 0 && !currentId) {
      dispatch(changeCurrentIdAction(djRadioCategory[0].id))
    }
  }, [djRadioCategory, currentId, dispatch])
  const page = Math.ceil(djRadioCategory.length / PAGE_SIZE) || 1

  function getSize(index: number) {
    return Math.min(index * PAGE_SIZE, djRadioCategory.length)
  }
  const [, setSearchParams] = useSearchParams()
  function selectCategory(id: number) {
    dispatch(changeCurrentIdAction(id))
    setSearchParams({ id: id.toString() })
    messageApi.open({
      type: 'success',
      content: `当前选择的id: ${id}`
    })
  }

  const [messageApi, contextHolder] = message.useMessage()

  return (
    <CategoryWrapper>
      {contextHolder}
      <div
        className="arrow arrow-left"
        onClick={() => carouselRef.current?.prev()}
      ></div>
      <CategoryContent>
        <Carousel dots={{ className: 'dots' }} ref={carouselRef}>
          {Array(page)
            .fill(0)
            .map((_, index) => {
              return (
                <div key={index} className="category-page">
                  {djRadioCategory
                    .slice(index * PAGE_SIZE, getSize(index + 1))
                    .map((item) => {
                      return (
                        <div
                          key={item.id}
                          onClick={() => {
                            dispatch(changeCurrentIdAction(item.id))
                            console.log(item.id)
                            selectCategory(item.id)
                          }}
                          className={classnames('category-item', {
                            active: currentId === item.id
                          })}
                        >
                          <CategoryItemImage
                            className="image"
                            imgurl={item.picWebUrl}
                          ></CategoryItemImage>
                          <span>{item.name}</span>
                        </div>
                      )
                    })}
                </div>
              )
            })}
        </Carousel>
      </CategoryContent>
      <div
        className="arrow arrow-right"
        onClick={() => carouselRef.current?.next()}
      ></div>
    </CategoryWrapper>
  )
}

export default memo(DjCategory)
